<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5中的SVG属性实现圆形进度条效果</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <style type="text/css">
        .svg {
            border: 1px solid red;
        }
    </style>

</head>

<body>

    <script>

        var H = 400;
        var W = 400;

        var svg = d3.select('body')
            .append('svg')
            .attr("width", W)
            .attr("height", H)
            .attr("class", "svg");

        svg.append("circle")
            .attr("cx", "200")
            .attr("cy", "200")
            .attr("r", "170")
            .attr("fill", "none")
            .attr("stroke-width", "40")
            .attr("stroke", "#051258");

        svg.append("circle")
            .attr("id", "c1")
            .attr("cx", "200")
            .attr("cy", "200")
            .attr("r", "170")
            .attr("stroke-width", "40")
            .attr("stroke", "#3399FF")
            .attr("fill", "#051258")
            .attr("transform", "matrix(0,-1,1,0,0,400)");

        svg.append("circle")
            .attr("cx", "200")
            .attr("cy", "200")
            .attr("r", "150")
            .attr("fill", "#000746");

        var circle = document.getElementById("c1");
        var percent = 0.7,
            perimeter = Math.PI * 2 * 170;
        circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1 - percent));

    </script>
</body>

</html>